<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Apple Dock</title>
    <link rel="stylesheet" href="../../style.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="bg-transparent">
      <header class="nav">
        <a href="/">
          <img src=" /logo.svg" alt="logo" />
        </a>
        <a
          href="https://jsmastery.com/all-courses"
          target="_blank"
          class="text-amber-50"
          >GSAP Course</a
        >
      </header>

      <section>
        <!-- Trigger Area -->
        <div class="dock-trigger"></div>

        <!-- Dock -->
        <div class="dock">
          <div class="icon">
            <img src=" /apple-dock/arc.png" alt="arc" />
          </div>
          <div class="icon">
            <img src=" /apple-dock/chatgpt.png" alt="chatgpt" />
          </div>
          <div class="icon">
            <img src=" /apple-dock/photos.png" alt="photos" />
          </div>
          <div class="icon">
            <img src=" /apple-dock/settings.png" alt="settings" />
          </div>
          <div class="icon">
            <img src=" /apple-dock/vscode.png" alt="vscode" />
          </div>
        </div>
      </section>

      <script type="module" src="script.js"></script>
    </main>
  </body>
</html>
